<template>
    <div class="approval-container">
      <!-- 数据表格 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="table-header">
            <span class="header-title">待审核用户列表</span>
            <el-button 
              type="primary" 
              :icon="Refresh" 
              @click="loadPendingUsers"
              :loading="loading"
            >刷新列表</el-button>
          </div>
        </template>
  
        <el-table 
          :data="userList" 
          v-loading="loading"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column label="用户信息">
            <template #default="{ row }">
              <div class="user-info">
                <el-avatar :src="row.avatar" class="user-avatar" />
                <div class="user-details">
                  <span class="username">{{ row.nickname || row.username }}</span>
                  <div class="user-meta">
                    <el-tag 
                      size="small" 
                      :type="row.number.startsWith('2') ? 'success' : 'warning'"
                    >
                      {{ row.number.startsWith('2') ? '学生' : '教师' }}
                    </el-tag>
                    <span class="user-id">ID: {{ row.userId }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
  
          <el-table-column prop="sex" label="性别" width="100">
            <template #default="{ row }">
              {{ row.sex === '01' ? '男' : '女' }}
            </template>
          </el-table-column>
  
          <el-table-column prop="number" label="用户编号" width="150" />
          <el-table-column prop="major" label="专业" width="200" />
  
          <el-table-column label="操作" width="180" align="right">
            <template #default="{ row }">
              <el-button 
                type="success" 
                size="small" 
                @click="handleApprove(row.userId, 1)"
                :loading="row.processing"
              >通过</el-button>
              <el-button 
                type="danger" 
                size="small" 
                @click="handleApprove(row.userId, 2)"
                :loading="row.processing"
              >拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 空状态 -->
        <el-empty 
          v-if="!loading && userList.length === 0" 
          description="暂无待审核用户"
          :image-size="200"
        />
      </el-card>
  
      <!-- 审核统计 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="8">
          <el-statistic 
            title="待审核总数" 
            :value="userList.length" 
            class="stats-card"
          />
        </el-col>
        <el-col :span="8">
          <el-statistic 
            title="今日新增申请" 
            :value="todayCount" 
            class="stats-card"
          />
        </el-col>
        <el-col :span="8">
          <el-statistic 
            title="平均处理时间" 
            value="12" 
            suffix="分钟" 
            class="stats-card"
          />
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Refresh } from '@element-plus/icons-vue'
  import axios from 'axios'
  
  const userList = ref([])
  const loading = ref(false)
  const todayCount = ref(0)
  
  // 加载待审核用户
  const loadPendingUsers = async () => {
    try {
      loading.value = true
      const response = await axios.get('http://localhost:8092/user/admin/pending-users')
      userList.value = response.data.data.map(user => ({
        ...user,
        processing: false
      }))
    } catch (error) {
      ElMessage.error('加载用户失败: ' + error.message)
    } finally {
      loading.value = false
    }
  }
  
  // 处理审核操作
  const handleApprove = (userId, status) => {
    ElMessageBox.confirm(
      `确定要${status === 1 ? '通过' : '拒绝'}该用户的申请吗？`,
      '审核确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }
    ).then(async () => {
      const user = userList.value.find(u => u.userId === userId)
      try {
        user.processing = true
        await axios.post('http://localhost:8092/user/admin/approve-user', null, {
          params: { userId, status }
        })
        
        userList.value = userList.value.filter(u => u.userId !== userId)
        ElMessage.success(`已${status === 1 ? '通过' : '拒绝'}用户申请`)
      } catch (error) {
        ElMessage.error('操作失败: ' + error.message)
      } finally {
        user.processing = false
      }
    })
  }
  
  // 表格行样式
  const tableRowClassName = ({ row }) => {
    return row.processing ? 'processing-row' : ''
  }
  
  onMounted(() => {
    loadPendingUsers()
  })
  </script>
  
  <style scoped>
  .approval-container {
    padding: 24px;
    background: #f5f7fa;
    min-height: calc(100vh - 64px);
  }
  
  .table-card {
    margin-bottom: 24px;
    border-radius: 12px;
    transition: box-shadow 0.3s;
  
    &:hover {
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }
  }
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    padding: 8px 0;
  }
  
  .user-avatar {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .user-details {
    display: flex;
    flex-direction: column;
  }
  
  .username {
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
  }
  
  .user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .user-id {
    font-size: 12px;
    color: #909399;
  }
  
  .stats-row {
    margin-bottom: 24px;
  }
  
  .stats-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
  
    &:hover {
      transform: translateY(-3px);
    }
  }
  
  :deep(.processing-row) {
    opacity: 0.6;
    background-color: #fafafa !important;
  }
  
  :deep(.el-table__row:hover) {
    background-color: #f5f7fa !important;
  }
  </style>